import React, { Component } from "react";
import Grid from '../../../../components/display/grid';
import { Form, Button, Select, Divider,message,Tooltip,Modal } from 'antd';
import {DataAuthList,roleSave} from '../../../../fetch/fetchApi';
const FormItem = Form.Item;
const createForm = Form.create;

class DataAuth extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible:false,
            visible4Config:false,
            visible4Invoice:false,
            visible4Finance:false,
            hasGetApi:true,
            refresh:0,
            selectInfo:{},
            prePageParams:{}
        };
        this.columns = [
            {
                title: '权限类型',
                dataIndex: 'role',
                key: 'role',
                render:(text)=>{
                    for (let key of Object.keys(text)) {
                        console.log(key); // 'a', 'b', 'c'
                        if(key==0){
                            return '漫游桩地区权限'
                        }
                        if(key==1){
                            return '桩群权限'
                        }
                        if(key==6){
                            return '自营桩地区权限'
                        }
                        if(key==7){
                            return '资产归属权限'
                        }
                      }
                }
                
            },
            {
                title: '交互方式',
                dataIndex: 'dataType',
                key: 'dataType',
                render:(text)=>{
                    if(text==0){
                        return '互联互通-开放数据'
                    }
                    if(text==1){
                        return '互联互通-开放控制'
                    }
                    if(text==2){
                        return '互联互通-控制互通'
                    }
                    if(text==9){
                        return '数据上报'
                    }
                }
            },
            {
                title: '权限范围',
                dataIndex: 'roleName',
                key: 'roleName',
                className: 'column-nowrap',
                width:500,
                render: (text, record) => (
                <Tooltip placement="topLeft" title={text} >
                    {text}
                </Tooltip>)
            },
            {
                title: '操作',
                key: 'operation',
                render: (text,record) => (
                    <span>
                        <a onClick={()=>{this.openModal(text)}}>修改</a>
                        <Divider type="vertical"/>
                        {/*<a onClick={()=>{this.deleteItem(text)}}>删除</a>*/}
                        <a onClick={()=>{this.confirm(text)}}>删除</a>
                    </span>
                )
            },
        ]
    }

    componentWillMount(){
        this.setState({
            prePageParams:window.LayoutTab['tabParam'].appkey
        },()=>{console.log(this.state.prePageParams)})
    }

    confirm=(text)=>{
        this.modal = Modal.confirm({
            title: 'Confirm',
            content: '确定删除该条数据？',
            okText: '确认',
            cancelText: '取消',
            onOk:(e)=>this.deleteItem(text)
        });
    }

    deleteItem=(text)=>{
        for (let [key] of Object.entries(text.role)) {
            text.role[key]=[]
        }
        delete text.roleName;
        console.log('text',text);
        roleSave(text).then(response=>{
            if(response&&response.data&&response.data.code==="200"){
                message.success("删除成功");
                this.setState({
                    refresh:this.state.refresh+1
                })
            }
            this.modal.destroy();
        })
    }

    openModal4Config=(data)=>{
        this.setState({
            visible4Config:true,
            selectInfo:data
        },()=>{console.log('selectInfo',this.state)})
    }

    openModal4Invoice=(data)=>{
        this.setState({
            visible4Invoice:true,
            selectInfo:data
        })
    }

    openModal4Finance=(data)=>{
        this.setState({
            visible4Finance:true,
            selectInfo:data
        })
    }

    openModal=(text)=>{
        this.props.onAdd.bind(window.LayoutTab)({
            'key': 'dataAuthAdd',
            "titleText": "权限配置"
        }, {
            'keyId': this.state.prePageParams,
            'role': text.role,
            'dataType':text.dataType,
            'appkeyA':text.appkeyA,
            'appkeyB':text.appkeyB,
        });
    }

    handleCancel=()=>{
        this.setState({
            visible:false,
            hasGetApi:true
        })
    }

    alreadyGet=()=>{
        this.setState({
            hasGetApi: false,
        });
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!!err) {
                return;
            }
            console.log(values);
            
        });
    };

    freshTable=()=>{
        this.setState({
            refresh:this.state.refresh+1
        })
    }


    render() {
        return(
            <div>
                <Button style={{marginRight:4}} onClick={this.openModal}>{'添加'}</Button>
                <Button type="primary" onClick={this.freshTable}>{'刷新'}</Button>
                <Grid className={'sc-table'} style={{marginTop:10}} columns={this.columns} params={{appkey:this.state.prePageParams}} refresh={this.state.refresh} fetchData={DataAuthList} />
            </div>
        )
    }
}
DataAuth = createForm()(DataAuth);
export default DataAuth;